<template>

  <div class="AddOrUpdate_main add_container main_container column_two">

    <div class="main_header">
      <div class="padding_container">
        <div class="left"><Breadcrumb /></div>
        <div class="right" />
      </div>
    </div>
    <div class="main_main main_conten_info">
      <div class="card">
        <CompanyVersion v-if="value1 && formData.totalFileSize && formData.space" :expirationtime="expirationTime" :form-data="formData" :value1="value1" />
      </div>
      <el-card class="card_info">
        <CompanyInfo :father-method="getById" />
      </el-card>
    </div>
    <!-- <el-card class="main_card">
      <div class="main_main">
        <el-form ref="form" :model="formData" :rules="rules" :inline="true">
          <el-form-item label="公司名称" prop="name">
            <el-input v-model="formData.name" :placeholder="editFalg?'':'请输入'" clearable :disabled="editFalg" />
          </el-form-item>
          <el-form-item label="简称" prop="shortName">
            <el-input v-model="formData.shortName" :placeholder="editFalg?'':'请输入'" clearable :disabled="editFalg" />
          </el-form-item>
          <el-form-item label="公司主页" prop="homepage">
            <el-input v-model="formData.homepage" :placeholder="editFalg?'':'请输入'" clearable :disabled="editFalg" />
          </el-form-item>
          <el-form-item label="公司地址" prop="address">
            <el-input v-model="formData.address" :placeholder="editFalg?'':'请输入'" clearable :disabled="editFalg" />
          </el-form-item>
          <el-form-item label="公司邮箱" prop="email">
            <el-input v-model="formData.email" :placeholder="editFalg?'':'请输入'" clearable :disabled="editFalg" />
          </el-form-item>
          <el-form-item label="公司电话" prop="phone">
            <el-input v-model="formData.phone" :placeholder="editFalg?'':'请输入'" clearable :disabled="editFalg" />
          </el-form-item>
          <el-form-item label="公司传真" prop="fax">
            <el-input v-model="formData.fax" :placeholder="editFalg?'':'请输入'" clearable :disabled="editFalg" />
          </el-form-item>
          <el-form-item label="开户银行" prop="bank">
            <el-input v-model="formData.bank" :placeholder="editFalg?'':'请输入'" clearable :disabled="editFalg" />
          </el-form-item>
          <el-form-item label="银行账户" prop="bankAccount">
            <el-input v-model="formData.bankAccount" :placeholder="editFalg?'':'请输入'" clearable :disabled="editFalg" />
          </el-form-item>
          <el-form-item label="税号" prop="tax">
            <el-input v-model="formData.tax" :placeholder="editFalg?'':'请输入'" clearable :disabled="editFalg" />
          </el-form-item>

          <el-form-item label="备注" class="double">
            <el-input v-model="formData.remark" type="textarea" :placeholder="editFalg?'':'请输入'" :disabled="editFalg" />
          </el-form-item>
          <el-form-item label="LOGO" class="double">
            <a :class="editFalg?'logoView':'logo'" @click.stop="uploadFile">
              <img v-if="formData.logoUrl" :src="formData.logoUrl" style="object-fit: contain;">
              <div v-else class="noPic">LOGO不存在，点击上传</div>
              <div class="logo_tip">推荐大小：234 x 30</div>
            </a>
          </el-form-item>

        </el-form>
      </div>
      <div class="main_bottom">
        <el-button v-if="editFalg" v-hasPermi="['system:company:edit']" @click.stop="editFalg=!editFalg">编辑</el-button>
        <el-button v-else v-hasPermi="['system:company:edit']" @click.stop="onSubmit">保存</el-button>
      </div>

    </el-card> -->

    <input ref="upload" type="file" style="display: none" @change="handleFileChange">
  </div>
</template>

<script>
import { addOrUpdate, getInfo, configKey } from '@/api/system/company'
import CompanyVersion from './CompanyVersion'
import CompanyInfo from './CompanyInfo'
import { mapGetters } from 'vuex'
import axios from 'axios'
import { getToken } from '@/utils/auth'
export default {
  name: 'AddOrUpdate',
  components: { CompanyVersion, CompanyInfo },
  computed: {
    ...mapGetters([
      'userId', 'userName', 'companyId'
    ])
  },
  data() {
    return {
      editFalg: true,
      formData: {
        name: undefined,
        shortName: undefined,
        homepage: undefined,
        address: undefined,
        email: undefined,
        phone: undefined,
        fax: undefined,
        bank: undefined,
        bankAccount: undefined,
        tax: undefined,
        logo: undefined,
        logoUrl: undefined,
        remark: undefined,
        typeId: undefined,
        leftDays: undefined,
        space: undefined,
        totalFileSize: undefined,
        authStatus: undefined,
        secondUserNums: undefined,
        isAdmin: ''
      },
      value1: undefined,
      expirationTime: undefined, // 到期时间
      rules: {
        name: [
          { required: true, message: '公司名称不能为空', trigger: 'change' }
        ]
      }
    }
  },
  created() {
    this.getById()
    this.getConfigKey()
  },
  methods: {
    // 详情
    getById() {
      getInfo(this.companyId).then(res => {
        Object.keys(this.formData).forEach(key => { // 给右边数据赋值
          this.formData[key] = res.data[key]
        })
        this.formData.isAdmin = res.isAdmin
        this.expirationTime = res.data.expirationTime
      })
    },
    // 库存流量预警
    async getConfigKey() {
      const { msg } = await configKey()
      this.value1 = msg
    },
    onSubmit() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          this.formData.id = this.companyId
          addOrUpdate(this.formData).then(res => {
            this.$store.commit('user/SET_LOGO', this.formData.logoUrl)
            this.$store.state.user.companyName = this.formData.name
            this.$message({
              message: res.msg,
              type: 'success'
            })
          })
          this.editFalg = true
        }
      })
    },
    uploadFile() {
      this.$refs.upload.click()
    },
    handleFileChange(e) {
      const files = e.target.files
      const formData = new FormData()
      // formData重复的往一个值添加数据并不会被覆盖掉，可以全部接收到，可以通过formData.getAll('files')来查看所有插入的数据
      for (let i = 0; i < files.length; i++) {
        formData.append('files', files[i], files[i].name)
      }
      const config = {
        headers: {
          'Content-Type': 'multipart/form-data',
          Authorization: getToken()
        }
      }
      axios.post('/common/resource/uploads', formData, config).then(res => {
        switch (res.data.code) {
          case 200:
            this.formData.logo = res.data.fileNames
            this.formData.logoUrl = res.data.urls
            break
          default:
            this.$message({
              message: res.data.msg,
              type: 'error'
            })
        }

        this.$refs.upload.value = ''
      })
    }
  }
}
</script>

<style lang="less" scoped>
/deep/.main_main{
  height: 100%;
  background: none;

}
// /deep/.main_conten_info{
//         min-width: 1350px;
//     overflow-x: auto;
// }
 .card{
    width: 400px;
  height: calc(100% - 30px);
    margin-left: 10px;
    margin-top: 10px;
    display: flex;flex-direction: column;

    .card1_header{
      display: flex;justify-content: flex-start;align-items: center;
    }
    /deep/ .el-card__body{
      flex: 1;
      .AvatarUpload{
        display: flex;flex-direction: column;justify-content: space-between;
        .avatar{
          justify-content: space-between;
        }
      }
    }
  }
  .card_info{
    height: calc(100% - 30px);
    margin-left: 10px;
    margin-top: 10px;
    width: calc(100% - 430px);
    /deep/ .el-card__body{
      height: 100%;
    }
  }
  .main_header{
    color: #606266;
    .left{
      padding-left:10px;
    }
  }
.main_bottom{
  background-color: unset;
}
.logo{
  display: flex;
  img{
    //width: 234px;
    height: 30px;
    //background-color: #606266;
  }
  .logo_tip{
    margin-left: 20px;
    color: #999999;
  }
}
.logoView{
  pointer-events: none;
    display: flex;
  img{
    //width: 234px;
    height: 30px;
    //background-color: #606266;
  }
  .logo_tip{
    margin-left: 20px;
    color: #999999;
  }
}
</style>
<style scoped>
.card1 >>> .el-card__header{
  padding-left: 20px;
  height: 50px;
  display: flex;align-items: center;
}
</style>
<style lang="less" scoped>
.main_main{
  height: calc(100% - 70px);
  flex-direction: row;
  padding: 0 !important;
  .card2{
    width: 400px;
  }
  /deep/ .el-card__body{
    padding: 0;
  }
}
</style>

